<script setup lang="ts">
import {onBeforeMount, ref} from "vue";
import {useRoute} from "vue-router";
import {getUserByUid} from "@/api/user/user";
import {commonConsoleLog, ECode} from "@/util/commonUtil";
import {message} from "ant-design-vue";
import _ from "lodash";
import {getUserMedalList} from "@/api/medal/medal";
import {timeAgoConvert} from "@/util/timeUtil";
import {router} from "@/router";
import {recorderBehavior} from "@/api/system/system";

const timer = ref<any>(null)
onBeforeMount(() => {
  getUserInfo()
  getUserMedalListMethod()
  // 3S后埋点信息上报
  timer.value = setTimeout(() => {
    recorderBehavior({'otherData': '徽章页', 'behavior': 'VISIT_PAGE'}).then((response: any) => {
      if (response.code == ECode.SUCCESS) {
        commonConsoleLog('徽章页信息上报成功')
      }
    })
  }, 3000)
})

const userInfo = ref<any>({})
const route = useRoute();
const userUid = ref<any>(route.params.userUid || null);
const medalClassifyList = ref<any>([])

async function getUserInfo() {
  if (_.isUndefined(userUid.value) || _.isNull(userUid.value)) {
    const routeData = router.resolve({
      path: '/403',
    })
    window.open(routeData.href, '_blank')
    message.error("非法请求！")
    return
  }
  let params = new URLSearchParams();
  params.append("userUid", userUid.value);
  await getUserByUid(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      userInfo.value = response.data;
    } else {
      message.error(response.message);
    }
  })
}

async function getUserMedalListMethod() {
  if (_.isUndefined(userUid.value) || _.isNull(userUid.value)) {
    const routeData = router.resolve({
      path: '/403',
    })
    window.open(routeData.href, '_blank')
    message.error("非法请求！")
    return
  }
  let params: any = {};
  params.userUid = userUid.value;
  getUserMedalList(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      medalClassifyList.value = response.data;
    }
  })
}

function timeGainFormat(gainProbability: any) {
  if (gainProbability) {
    return "[约" + gainProbability + "用户获取]";
  } else {
    return "[约0%用户获取]";
  }
}

function timeFormat(gainTime: any) {
  if (gainTime) {
    return timeAgoConvert(gainTime) + "获得";
  } else {
    return "暂未获得";
  }
}
</script>

<template>
  <section class="medalPage max-w-screen-lg m-auto mt-8 w-full rounded-xl mb-12">
    <header
        class="badge-header relative flex items-center justify-center w-full h-[196px] bg-cover bg-no-repeat rounded-xl">
      <div class="userInfo relative w-full">
        <div class="w-full h-16 flex items-center justify-center">
          <a-avatar v-if="userInfo.photoUrl" size="large" class="h-14 w-14" :src="userInfo.photoUrl"
                    style="color: #fcd34d;outline: thin dashed;outline-offset: .5em;"/>
          <a-avatar v-else size="large" class="h-14 w-14 flex items-center justify-center"
                    style="color: #fcd34d;outline: thin dashed;outline-offset: .5em;">
            {{ String(userInfo.nickName).slice(0, 1) }}
          </a-avatar>
        </div>
        <span class="text-center font-semibold text-white flex items-center justify-center mt-6">
          {{ userInfo.nickName }}
        </span>
        <span class="obtain-count text-center text-white flex items-center justify-center mt-4">
          已解锁 <span class="font-semibold text-orange-300 ml-1 mr-1">{{ userInfo.userMedalCount }}</span> 枚勋章
        </span>
      </div>
    </header>
    <div class="badge-list">
      <ul class="series">
        <template v-for="medalClassify in medalClassifyList" :key="medalClassify.uid">
          <li class="list-none not-italic">
            <div class="series-title h-8 w-full flex items-center justify-center mt-6 mb-2">
              <img
                  src=""
                  alt="" class="series-left block mr-2">
              <div class="title text-[20px] not-italic font-semibold">{{ medalClassify.name }}</div>
              <img
                  src=""
                  alt="" class="series-right block ml-2">
            </div>
            <ul class="badge-icon-list grid justify-between">
              <li v-for="medal in medalClassify.medalList" :key="medal.uid" class="badge-icon-item">
                <a-tooltip>
                  <template #title>
                    {{ timeFormat(medal.gainTime) + timeGainFormat(medal.gainProbability) }}
                  </template>
                  <img :class="medal.gainTime ? '': 'grayscale'" v-lazy="medal.fileUrl" alt="medal"
                       class="not-obtain cursor-pointer" :src="medal.fileUrl" data-fancybox="gallery"
                       :data-caption="medal.name">
                </a-tooltip>
                <div class="badge-desc text-center text-base font-semibold mb-2">{{ medal.name }}</div>
                <div class="obtain-date text-center text-gray-400">{{ medal.summary }}</div>
              </li>
            </ul>
          </li>
        </template>
      </ul>
    </div>
  </section>
</template>

<style scoped lang="less">
.badge-header {
  background-image: url(@/assets/medal/badge-header.png);
}

.series .badge-icon-list {
  grid-template-columns: repeat(auto-fill, 150px);
  grid-gap: 24px 40px;
}
</style>
